<template>
  <div style="background-color: #f5f5f5">
    <product-navbar titleText="专家资源" subtitleText="有需求、找资源、寻合作,平台致力于为供、需双方提供一个流畅、专业的需求对接交互平台"/>
    <product-select type="zjzy"></product-select>

    <!-- 专家资源列表 -->
    <div class="expert-list-container">
      <div class="expert-grid">
        <div v-for="(expert, index) in paginatedData" :key="index" class="expert-card">
          <div class="expert-image">
            <img :src="expert.avatar" alt="专家头像">
          </div>
          <div class="expert-info">
            <div class="expert-name">{{ expert.name }}</div>
            <div class="expert-tags">
              <el-tag type="info" size="small" v-for="(tag, tagIndex) in expert.tags" :key="tagIndex">
                {{ tag }}
              </el-tag>
            </div>
            <div class="expert-desc">{{ expert.description }}</div>
          </div>
        </div>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :total="expertData.length"
            :page-size="pageSize"
            :current-page="currentPage"
            :page-sizes="[6, 12, 18, 24]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import ProductNavbar from "@/view/productEmpowerment/model/productNavbar.vue";
import ProductSelect from "@/view/productEmpowerment/model/productSelect.vue";
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  components: {
    ContactFooter,
    ProductNavbar,
    ProductSelect
  },
  data() {
    return {
      expertData: [
        {
          avatar: require('@/assets/productEmpowerment/people.svg'),
          name: '张教授',
          tags: ['专业技术', '成功转化'],
          description: '计算机科学博士，人工智能领域专家，拥有10年以上机器学习研究经验，主持多项国家级科研项目。'
        },
        {
          avatar: require('@/assets/productEmpowerment/people.svg'),
          name: '李工程师',
          tags: ['工业设计', '产品创新'],
          description: '资深工业设计师，曾主导多个知名消费电子产品的设计工作，擅长用户体验与产品创新。'
        },
        {
          avatar: require('@/assets/productEmpowerment/people.svg'),
          name: '王研究员',
          tags: ['生物技术', '医药研发'],
          description: '生物医药领域研究员，专注于新药开发，拥有多项专利技术，成功推动多个药物临床试验。'
        },
        {
          avatar: require('@/assets/productEmpowerment/people.svg'),
          name: '赵总监',
          tags: ['市场营销', '品牌策划'],
          description: '资深市场营销专家，曾服务多家世界500强企业，擅长品牌战略规划和数字营销。'
        },
        {
          avatar: require('@/assets/productEmpowerment/people.svg'),
          name: '刘博士',
          tags: ['新能源', '可持续发展'],
          description: '新能源领域专家，专注于太阳能技术研发，主持多项国家级新能源项目。'
        },
        {
          avatar: require('@/assets/productEmpowerment/people.svg'),
          name: '陈顾问',
          tags: ['金融投资', '风险管理'],
          description: '金融投资顾问，拥有20年金融市场经验，擅长资产配置和投资风险管理。'
        },
        {
          avatar: require('@/assets/productEmpowerment/people.svg'),
          name: '陈顾问',
          tags: ['金融投资', '风险管理'],
          description: '金融投资顾问，拥有20年金融市场经验，擅长资产配置和投资风险管理。'
        },
        {
          avatar: require('@/assets/productEmpowerment/people.svg'),
          name: '陈顾问',
          tags: ['金融投资', '风险管理'],
          description: '金融投资顾问，拥有20年金融市场经验，擅长资产配置和投资风险管理。'
        },
        {
          avatar: require('@/assets/productEmpowerment/people.svg'),
          name: '陈顾问',
          tags: ['金融投资', '风险管理'],
          description: '金融投资顾问，拥有20年金融市场经验，擅长资产配置和投资风险管理。'
        },
        // 可以继续添加更多专家数据...
      ],
      currentPage: 1,
      pageSize: 6
    }
  },
  computed: {
    // 计算分页后的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.expertData.slice(start, end);
    }
  },
  methods: {
    // 每页条数变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置到第一页
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
}
</script>

<style scoped>
.expert-list-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 15px;
}

.expert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.expert-card {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 200px;
}

.expert-image {
  width: 33.33%;
  height: 100%;
}

.expert-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expert-info {
  width: 66.67%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.expert-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
}

.expert-tags {
  margin-bottom: 15px;
  text-align: left;
}

.expert-tags .el-tag {
  margin-right: 8px;
  margin-bottom: 5px;
}

.expert-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}

/* 分页样式 */
.pagination-wrapper {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 调整分页组件样式 */
.el-pagination {
  padding: 10px 0;
}

.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #409eff;
  color: #fff;
}

@media (max-width: 768px) {
  .expert-grid {
    grid-template-columns: 1fr;
  }

  .expert-card {
    height: auto;
    flex-direction: column;
  }

  .expert-image,
  .expert-info {
    width: 100%;
  }

  .expert-image {
    height: 180px;
  }

  /* 移动端分页调整 */
  .pagination-wrapper {
    overflow-x: auto;
    padding-bottom: 10px;
  }
}
</style>